<template>
  <el-row>
    <el-row>
      <h1>航段距离查询（距离估算）</h1>
    </el-row>
    <el-row
      v-loading.fullscreen.lock="loading"
      element-loading-text="航段距离生成中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-row>
        <el-col :span="8" :offset="8">
          <el-upload
            class="upload-demo"
            ref="upload"
            name="uploadFile"
            action="/distance/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-progress="onLoading"
            :on-success="onSuccess"
            :on-error="onError"
            v-loading="loading"
            element-loading-text="正在航段距离明细"
            element-loading-spinner="el-icon-loading"
          >
            <el-button slot="trigger" size="medium">上传航段经纬度明细</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-button @click.prevent="onsubmit" type="primary">
          提交
        </el-button>
      </el-row>
      <el-link icon="el-icon-tickets" href="/download/距离测算模板.xlsx" type="primary">模板下载</el-link>
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: "Distance",
  components: {},
  data() {
    return {
      loading: false,
      labelPosition: "top",
      fileList: [],
      formModel: {
        monthDate: ""
      }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    onLoading() {
      this.loading = true;
    },
    unLoading() {
      this.loading = false;
    },
    onError(err) {
      this.loading = false;
      this.$alert(err, "上传失败", { dangerouslyUseHTMLString: true });
    },
    onSuccess() {
      this.loading = false;
      this.$alert("文件上传成功", "成功", {
        type: "success",
        confirmButtonText: "确定"
      });
    },
    onsubmit() {
      this.onLoading();
      window.open("/distance/getDistacneList");
      this.unLoading();
    }
  }
};
</script>

<style scoped></style>
